<template>
    <div class="leftTwo">
        <ThemeTitlenew :title="title" />
        <div class="citys">
            <div class="cityTitle">
                <!-- <div class="sideLine"></div> -->
                <div class="cityWord">地级行政区（4个）</div>
            </div>
            <div class="cityList">
                <div
                    :class = "curent == index ? 'active': 'cityItem'"
                    v-for="(item, index) in cityList"
                    :key="index"
                    @click="handleCityClick(item, index)"
                >
                    {{ item.name }}
                </div>
                
            </div>
        </div>
        <div class="countys">
            <div class="countyTitle">
                <!-- <div class="sideLine"></div> -->
                <div class="countyWord">县级行政区（15个）</div>
            </div>
            <div class="countyList">
                <div
                    class="countyItem"
                    v-for="(item, index) in countyList"
                    :key="index"
                    @click="handleCountyClick(item, index)"
                >
                    <!-- :class="{'countyActive':item.isActive}" -->
                    {{ item.name }}
                </div>
            </div>
        </div>
        <!-- <div>
            
        <div> -->
    </div>
</template>

<script>
import ThemeTitlenew from "../../common/ThemeTitlenew";
import { onMounted, ref, provide, reactive } from "vue";
import { useStore } from "vuex";
import axios from 'axios'
import { addLayerImage,removeLayerByName} from '@/cesiumPlugin/layer'
export default {
    components: {
        ThemeTitlenew,
    },

    setup() {
        const store = useStore();
        const curent = ref(-1)
        const cityDec = {
            海口市: "海口，别称“椰城”，海南省省会，国家“一带一路”战略支点城市，海南自由贸易港核心城市，地处海南岛北部，东邻文昌，西接澄迈，南毗定安，北濒琼州海峡，是海南省政治、经济、科技、文化中心和最大的交通枢纽。",
            三亚市: "三亚市，是海南省地级市，简称崖，古称崖州，别称鹿城，地处海南岛的最南端。三亚东邻陵水县，西接乐东县，北毗保亭县，南临南海",
            三沙市: "三沙市，是海南省地级市，地处中国南海中南部，海南省南部，辖西沙群岛、中沙群岛、南沙群岛的岛礁及其海域，陆地面积20多平方公里，总面积200多万平方公里",
            儋州市: "儋州市，是海南省地级市。儋州市地处海南西北部，濒临北部湾，是海南西部的经济、交通、通信和文化中心",
            五指山市:
                "五指山市是海南省直辖县级市，地处海南岛中南部腹地，是海南岛中部地区的中心城市和交通枢纽，也是海南省中部少数民族的聚居地。",
            文昌市: "文昌，海南省下辖市，海南三大历史古邑之一，是中国著名的侨乡，是琼崖革命重要的根据地之一 [3]  ，海南闽南文化发源地，海南文昌航天发射中心所在地，是中国第四座航天之城",
            琼海市: "琼海，海南省县级市，位于海南省东部，万泉河中下游",
            万宁市: "万宁，海南省县级市，位于海南岛东南部，东临南海，西接琼中县，南和陵水县相邻，北和琼海市交界。",
            东方市: "东方市，海南省下辖县级市，位于海南省西南部，北部湾东岸，昌化江下游，南及东南与乐东县接壤，北至东北隔昌化江与昌江黎族自治县交界，西临北部湾，与越南隔海相望，东靠黎母山脉。",
            定安县: "定安县，海南省直辖县，位于海南岛的中部偏东北",
            屯昌县: "屯昌县，海南省直辖县，位于海南岛中部偏北,建县时间不长，其前身新民县所辖地，历史上原是琼山、定安、澄迈三县的边区",
            澄迈县: "澄迈县位于海南岛的西北部，环北部湾城市群的县，毗邻省会海口市,澄迈县先后获得“世界长寿之乡”、“中国绿色名县”、“中国最佳休闲旅游县”、“中国美丽乡村建设示范县”、“十大文化特色旅游名县”、“国家卫生县城” 等",
            临高县: "临高县，是海南省直辖县，地处海南岛西北部，东邻澄迈县，西南与儋州市接壤，西北濒临北部湾，北濒琼州海峡，与雷州半岛隔海相望。",
            白沙黎族自治县:
                "白沙黎族自治县，海南省下辖自治县，位于海南岛中西部，东与琼中县为依，东南与五指山市交界，南与乐东县相连，西与昌江县接壤，北与儋州市毗邻。",
            昌江黎族自治县:
                "昌江黎族自治县是海南省直辖自治县，地处海南岛西部，总面积1569平方千米，下辖7镇1乡",
            乐东黎族自治县:
                "乐东黎族自治县，是海南省直管自治县，位于海南岛西南部",
            陵水黎族自治县:
                "陵水黎族自治县位于海南岛的东南部,是个以黎族、汉族、苗族人口居多的“大杂居，小聚居”的市县。",
            保亭黎族苗族自治县:
                "亭黎族苗族自治县，隶属于海南省，位于海南岛中部五指山南麓。地处海南省南部内陆",
            琼中黎族苗族自治县:
                "琼中黎族苗族自治县是海南省下辖的民族自治县之一，县境地处海南岛中部，五指山北麓，热带海洋季风气候，夏长无酷暑，冬短无严寒",
        };
        const cityCenter = {
            海口市: [110.198418, 20.045805],
            三亚市: [109.511709, 18.252865],
            三沙市: [112.234483, 16.774644],
            儋州市: [109.580812, 19.520948],
            五指山市: [109.516784, 18.774827],
            文昌市: [110.797473, 19.544234],
            琼海市: [110.474524, 19.259112],
            万宁市: [110.392605, 18.793697],
            东方市: [108.651829, 19.095187],
            定安县: [110.358001, 19.681215],
            屯昌县: [110.101667, 19.351662],
            澄迈县: [110.007497, 19.738885],
            临高县: [109.690508, 19.912025],
            白沙黎族自治县: [109.4429, 19.221641],
            昌江黎族自治县: [109.055783, 19.298139],
            乐东黎族自治县: [109.173384, 18.750063],
            陵水黎族自治县: [110.037553, 18.506045],
            保亭黎族苗族自治县: [109.700373, 18.640156],
            琼中黎族苗族自治县: [109.838389, 19.033369],
        };
        const title = provide("title", "行政区划");
        const cityList = reactive([
            { name: "海口市", isActive: false },
            { name: "三亚市", isActive: false },
            { name: "三沙市", isActive: false },
            { name: "儋州市", isActive: false },
        ]);
        cityList.forEach((item) => {
            reactive(item);
        });
        let currentGeojson = "";
        const countyList = reactive([
            { name: "五指山市", isActive: false },
            { name: "文昌市", isActive: false },
            { name: "保亭黎族苗族自治县", isActive: false },
            { name: "琼海市", isActive: false },
            { name: "万宁市", isActive: false },
            { name: "琼中黎族苗族自治县", isActive: false },
            { name: "东方市", isActive: false },
             { name: "白沙黎族自治县", isActive: false },
            { name: "定安县", isActive: false },
            { name: "屯昌县", isActive: false },
             { name: "昌江黎族自治县", isActive: false },
            { name: "澄迈县", isActive: false },
            { name: "乐东黎族自治县", isActive: false },
            { name: "临高县", isActive: false },
            { name: "陵水黎族自治县", isActive: false },
        ]);
        countyList.forEach((item) => {
            reactive(item);
        });
        //初始化html样式

        const handleCityClick = (item, index) => {
            // if(currentGeojson){
            //     layerManager.removeGeojson(currentGeojson)
            // }
            // cityList[index].isActive = !cityList[index].isActive
            // if(cityList[index].isActive){
                curent._value = index
                console.log(index)
                console.log(curent._value)
                store.commit("changeDescShow",false)
                   var serviceUrl = "http://59.212.37.22/ime-cloud/rest/ADMI_DIVI_A/feature/0/query?where=name="+"'"+item.name+"'";
                 $.ajax({
                     url: serviceUrl,
                     type: 'get',
                     dataType:'json',
                     success: function (res) {
                         if(res.status == "ok"){
                             let arr = res.result[0].geometry
                               if(arr.indexOf("MULTI")>-1){
                                   let arr1 = arr.replace("MULTIPOLYGON(((", "[[").replace(")))","]]").replace(/\(+/g, "[").replace(/\)+/g, "]").replace(/\s+/g, ",");
                                   let arr2 = eval( "(" + arr1 + ")" )
                                   arr2.forEach((item,index) => {
                                       layerManager.addPloygonLine("woshinidaye"+index,item)
                                   });
                               }else{
                                 //二，针对POLYGON 首位替换，去掉
                                 let arr1 = arr.replace("POLYGON((", "[").replace("))","]").replace(/\s+/g, ",");
                                 let arr2 = eval( "(" + arr1 + ")" )
                                 layerManager.addPloygonLine("woshinidaye",arr2)
                              }
                         }
                     },
                     error:function (e) {
                         console.log(e)
                     }
                 }); 
                layerManager.removeAll()
                layerManager.addBillboard("descBillboard",cityCenter[item.name][0],cityCenter[item.name][1],"/data/images/earth/local1.png")
                // layerManager.addGeojsonZoom(`./data/geojson/cityOrCounty/${item.name}.json`)
                viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(cityCenter[item.name][0],cityCenter[item.name][1], 500000),
                },1000);
             
                setTimeout(()=>{
                    css3Renderer.addEntityLayer({
                        id: 'descDialog',
                        position: [cityCenter[item.name][0],cityCenter[item.name][1],10],//高度为 boxHeightMax
                        element: `<div class='ysc-dynamic-layer ys-css3-box' id='descDialog'>
                                        <div class='line'></div>
                                        <div class='main'>
                                            <div class="mainTitle">${item.name}</div>
                                            <p style="color:rgba(55,220,255,1);line-height:20px;font-size:16px;">
                                                ${cityDec[item.name]}
                                            </p>
                                        </div>
                                    </div>`,
                        offset:[10,-250 ],
                        boxHeight: 1,//中间立方体的高度
                        boxHeightDif: 1,//中间立方体的高度增长差值，越大增长越快
                        boxHeightMax: 1,//中间立方体的最大高度
                        boxSide:1,//立方体的边长
                        boxMaterial: Cesium.Color.DEEPSKYBLUE.withAlpha(0.5),
                        circleSize: 1,//大圆的大小，小圆的大小默认为一半
                    })
                },2000)     
            // store.commit("changeDescShow", false);
            // layerManager.removeAll();
            // layerManager.addBillboard(
            //     "descBillboard",
            //     cityCenter[item.name][0],
            //     cityCenter[item.name][1],
            //     "/data/images/earth/local1.png"
            // );
            // layerManager.addGeojsonZoom(
            //     `./data/geojson/cityOrCounty/${item.name}.json`
            // );
            // setTimeout(() => {
            //     css3Renderer.append({
            //         id: "descDialog",
            //         position: [
            //             cityCenter[item.name][0],
            //             cityCenter[item.name][1],
            //             10,
            //         ], //高度为 boxHeightMax
            //         element: `<div class='ysc-dynamic-layer ys-css3-box' id='descDialog'>
            //                             <div class='line'></div>
            //                             <div class='main'>
            //                                 <div class="mainTitle">${
            //                                     item.name
            //                                 }</div>
            //                                 <div style="color:rgba(55,220,255,1);line-height:20px;font-size:18px;">
            //                                     ${cityDec[item.name]}
            //                                 </div>
            //                             </div>
            //                         </div>`,
            //         offset: [10, -250],
            //     });
            // }, 2000);

            // }else{

            // if(layerManager.currentGeoJson){

            // }
            // css3Renderer.remove('descDialog')
            // layerManager.removeBillboard("descBillboard")
            // }
        };
        const handleCountyClick = (item, index) => {
            // if(currentGeojson){
            //     layerManager.removeGeojson(currentGeojson)
            // }
            // countyList[index].isActive = !countyList[index].isActive
            // if(countyList[index].isActive){
                store.commit("changeDescShow",false)
                   var serviceUrl = "http://59.212.37.22/ime-cloud/rest/ADMI_DIVI_A/feature/0/query?where=name="+"'"+item.name+"'";
                 $.ajax({
                     url: serviceUrl,
                     type: 'get',
                     dataType:'json',
                     success: function (res) {
                         if(res.status == "ok"){
                             let arr = res.result[0].geometry
                             console.log(arr)
                               if(arr.indexOf("MULTI")>-1){
                                   let arr1 = arr.replace("MULTIPOLYGON(((", "[[").replace(")))","]]").replace(/\(+/g, "[").replace(/\)+/g, "]").replace(/\s+/g, ",");
                                   let arr2 = eval( "(" + arr1 + ")" )
                                   arr2.forEach((item,index) => {
                                       layerManager.addPloygonLine("woshinidaye"+index,item)
                                   });
                               }else{
                                 //二，针对POLYGON 首位替换，去掉
                                 let arr1 = arr.replace("POLYGON((", "[").replace("))","]").replace(/\s+/g, ",");
                                 let arr2 = eval( "(" + arr1 + ")" )
                                 layerManager.addPloygonLine("woshinidaye",arr2)
                              }
                         }
                     },
                     error:function (e) {
                         console.log(e)
                     }
                 }); 
                layerManager.removeAll()
                layerManager.addBillboard("descBillboard",cityCenter[item.name][0],cityCenter[item.name][1],"/data/images/earth/local1.png")
                // layerManager.addGeojsonZoom(`./data/geojson/cityOrCounty/${item.name}.json`)
                viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(cityCenter[item.name][0],cityCenter[item.name][1], 500000),
                },1000);
             
                setTimeout(()=>{
                    css3Renderer.addEntityLayer({
                        id: 'descDialog',
                        position: [cityCenter[item.name][0],cityCenter[item.name][1],10],//高度为 boxHeightMax
                        element: `<div class='ysc-dynamic-layer ys-css3-box' id='descDialog'>
                                        <div class='line'></div>
                                        <div class='main'>
                                            <div class="mainTitle">${item.name}</div>
                                            <p style="color:rgba(55,220,255,1);line-height:20px;font-size:16px;">
                                                ${cityDec[item.name]}
                                            </p>
                                        </div>
                                    </div>`,
                        offset:[10,-250 ],
                        boxHeight: 1,//中间立方体的高度
                        boxHeightDif: 1,//中间立方体的高度增长差值，越大增长越快
                        boxHeightMax: 1,//中间立方体的最大高度
                        boxSide:1,//立方体的边长
                        boxMaterial: Cesium.Color.DEEPSKYBLUE.withAlpha(0.5),
                        circleSize: 1,//大圆的大小，小圆的大小默认为一半
                    })
                },2000)     
            // }else{
            //     layerManager.removeAll()
            // if(currentGeojson){
            //     layerManager.removeGeojson(currentGeojson)
            // }
            // css3Renderer.removeEntityLayer('descDialog')
            // layerManager.removeBillboard("descBillboard")
            // }
        };
        onMounted(() => {});
        return {
            title,
            cityList,
            countyList,
            handleCityClick,
            handleCountyClick,
            curent
        };
    },
};
</script>
<style>
.ex-box {
    width: 200px;
    line-height: 30px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 20px;
    pointer-events: none;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .leftTwo {
        margin-top: vh(25);

        .citys {
            .cityTitle {
                margin-top: vh(22);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .cityWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .cityList {
                display: flex;
                margin-top: vh(15);
                margin-bottom: vh(10);
                // margin-left: vw(12);
                justify-content: space-between;

                .cityItem {
                    flex-shrink: 0;
                    width: vw(78);
                    height: vh(32);
                    line-height: vh(32);
                    text-align: center;
                    font-size: vw(14);
                    background: #022D40;
                    border: 1px solid #0A4D6A;
                    cursor: pointer;
                }

                // .cityItem:hover {
                //     background: #1398CF;
                // }
                 .active{
                    background: #1398CF; 
                }
            }
        }

        .countys {
            .countyTitle {
                margin-bottom: vh(15);
                margin-top: vh(24);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .countyWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .countyList {
                display: flex;
                flex-wrap: wrap;
                // margin-left: vw(1);
                justify-content: space-between;
                .countyItem {
                    flex-shrink: 0;
                    min-width: vw(90);
                    margin-bottom: vh(12);
                    // margin-left: vw(10);
                    padding-left: vw(8);
                    padding-right: vw(8);
                    height: vh(32);
                    line-height: vh(32);
                    text-align: center;
                    font-size: vw(14);
                    background: #022D40;
                    border: 1px solid #0A4D6A;
                    cursor: pointer;
                }

                // .countyItem:hover {
                //     background: #1398CF;
                // }
                .active{
                    background: #1398CF; 
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .leftTwo {
        position: absolute;
        top:vh(100);
        right: vw1(40);
        // margin-top: vh(28);
        width: vw1(414);
        .citys {
            .cityTitle {
                width: vw1(414);
                margin-top: vh(22);
                display: flex;

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .cityWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }

            .cityList {
                display: flex;
                width: vw1(400);
                margin-top: vh(30);
                margin-bottom: vh(20);
                margin-left: vw1(12);
                justify-content: space-between;

                .cityItem {
                    flex-shrink: 0;
                    width: vw1(78);
                    height: vh(40);
                    line-height: vh(40);
                    text-align: center;
                    font-size: vw1(16);
                    background: #022D40;
                    border: 1px solid #0A4D6A;
                    cursor: pointer;
                }

                .cityItem:hover {
                    background: #1398CF;
                }
            }
        }

        .countys {
            .countyTitle {
                margin-bottom: vh(30);
                margin-top: vh(48);
                display: flex;
                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }
                .countyWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }
            .countyList {
                display: flex;
                flex-wrap: wrap;
                margin-left: vw1(-15);
                .countyItem {
                    flex-shrink: 0;
                    min-width: vw1(78);
                    margin-bottom: vh(24);
                    margin-left: vw1(28);
                    padding-left: vw1(6);
                    padding-right: vw1(5);
                    height: vh(40);
                    line-height: vh(40);
                    text-align: center;
                    font-size: vw1(16);
                    background: #022D40;
                    border: 1px solid #0A4D6A;
                    cursor: pointer;
                }

                .countyItem:hover {
                    background: #1398CF;
                }
            }
        }
    }
}
</style>